<template>
<div>
    <div bg-cover left mgr2 bd-gray3 :style="{'background-image':`url(${value[prop]})`,width:`${width}px`,height:`${height}px`}"></div>
    <!-- <p gray2 mgt2>上传新的头像</p> -->
    <p>
        <Button @click="showResourceModal=true" :disabled="disabled" mgr1>选择文件</Button>
        <Button @click="handleClear" :disabled="disabled">清除</Button>
    </p>
    <div v-if="showTip">
        <p gray3 mgt2>允许的文件类型JPG，GIF或PNG。</p>
        <p gray3>最大文件尺寸为1MB</p>
    </div>
    <resource-core-modal v-model="showResourceModal" @on-selected="handleOnSelectedImage"></resource-core-modal>
</div>
</template>

<script lang="ts">
import ResourceCoreModal from './resource-core-modal';

export default {
    props: {
        value: {
            type: Object
        },
        prop: {
            type: String
        },
        width: {
            type: Number,
            default: 200
        },
        height: {
            type: Number,
            default: 150
        },
        showTip: {
            type: Boolean,
            default: true
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    components: {
        ResourceCoreModal
    },
    data() {
        return {
            showResourceModal: false
        }
    },
    computed: {
    },
    methods: {
        handleOnSelectedImage(items) {
            this.value[this.prop] = items[0].url;
        },
        handleClear() {
            this.value[this.prop] = "";
        }
    }
}
</script>

<style lang="less">

</style>
